@charset 'utf-8';
@import 'reset';
@import 'prefixes';
.web{
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.2;
    font-family: 'Gotham', Helvetica, Arial, sans-serif;
    font-weight: 300;
    }
    header{
        font-family:'Gotham', Helvetica, Arial, sans-serif;
        background: #282828;
        .nav{
            padding-left: 15px;
            padding-right: 15px;
            min-height: 66px;
            margin-left: auto;
            margin-right: auto;
            width:1170px;
            a{
                img{
                    margin-top: 6px;
                    height: 50px;
                }
            }
            ul{  
                .shop-car{
                    background: #f25c4a;
                    min-width: 120px;
                    &:hover{
                        background: #ee4834;
                    }
                }          
                li{
                    &:nth-child(3){
                        i{
                            opacity: 1;
                            font-size: 55px;
                            line-height: 100px;
                            display: inline;
                        }
                    }
                    &:nth-child(4){
                        i{
                            opacity: 1;
                            font-size: 55px;
                            line-height: 100px;
                            display: inline;
                        }
                        a{
                            span{
                                display: block;
                                line-height: 30px;
                                margin-top: 10px;
                            }
                        }
                    }
                    &:nth-child(2){
                        i{
                            opacity: 1;
                            font-size: 55px;
                            line-height: 100px;
                            display: inline;
                        }
                    }
                    &:not(:nth-child(9)):hover>a{
                        color: #888;
                    }
                    display: inline-block;
                    padding:0px 2% 0 2%;
                    line-height: 66px;
                    a{
                        color: #fff;
                        font-size: 13px;
                        font-weight: 300;
                        @include transition(all 0.15s cubic-bezier(0.65, 0.045, 0.35, 1));
                       .icon-2x{ 
                            font-size: 20px;
                            display: inline-block;
                            margin-top: -5px; 
                            vertical-align: middle;
                        } 
                    }
                }
                .product{
                    .list{
                        overflow: hidden;
                        position: absolute;
                        z-index: 195;
                        width: 100%;
                        top: 66px;
                        left: 0;
                        height: 0px;
                        transition: all 1s;
                        background:rgba(49, 49, 49, 0.95);
                        .arrow-right{
                            cursor: pointer;
                            top: 0;
                            width: 80px;
                            color: #fff;
                            position: absolute;
                            right: 85px;
                            opacity: 0.3;
                            line-height: 220px;
                            font-size: 32px;
                            font-weight: bold;
                        }
                        .arrow-left{
                            cursor: pointer;
                            top: 0;
                            width: 80px;
                            color: #fff;
                            position: absolute;
                            left: 85px;
                            opacity: 0.3;
                            line-height: 220px;
                            font-size: 32px;
                            font-weight: bold;
                        }
                        div{
                            position: relative;
                            width: 1170px;
                            margin: auto;
                            height: 240px;
                            overflow: hidden;
                            ul{
                                width: 1000%;
                                position: absolute;
                                top: 40px;
                                left:0px;
                                transition: all 1s;
                                .showall{
                                    border-radius: 50%;
                                    line-height: 88px;
                                    font-size: 30px;
                                    margin-top: 15px;
                                    background: #282828;
                                    padding:10px;
                                }
                                li{
                                    &:hover span{
                                        color:#888;
                                    }
                                    &:hover .showall{
                                        color: #888;
                                    }
                                    padding: 0;
                                    width: 195px;
                                    a{
                                        img{
                                            height: 120px;
                                            vertical-align: middle;
                                        }
                                        span{
                                            display: block;
                                            line-height: 30px;
                                            margin-top: 10px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &:hover .list{
                        height: 240px;
                    }
                }
            }
        }
    }
    .nb-banner-contain{
        position: relative;
        height: 464px;
        overflow: hidden;
        width: 100%;
        .bx-wrapper{
            .bx-viewport{
                .bxslider{
                   li{
                       transition:all 3s;
                       opacity: 0;
                       &:first-child{
                           z-index: 10;
                           opacity: 1;
                       }
                       position: absolute;
                       width: 1349px;
                       left: -285.5px;
                       a{
                           display: block;
                           height: 520px;
                        }
                    }
                }
            }
            .bx-default-pager{
                position: absolute;
                left: 47%;
                bottom: 25px;
                z-index: 999;
                span{
                    display: inline-block;
                    height: 10px;
                    width: 10px;
                    transform: scale(0.6);
                    background: #999;
                    border: 2px solid #999;
                    margin: 0 5px;
                    border-radius: 50%;
                    cursor: pointer;
                }
                .active{
                    border: 2px solid #e8340e;
                    height: 8px;
                    width: 8px;
                    transform: scale(1);
                    background: transparent;
                }
            }
        }
    }
    .nb-access-content{
        width: 100%;
        .nb-access-all{
            width: 1200px;
            margin: 20px auto 0;
            overflow: hidden;
            ul{
                width: 95%;
                margin: auto;
                li{
                    color: #ccc;
                    font-weight: 300;
                    padding: 15px 0;
                    &:first-child{
                        border-bottom: 1px #f1f1f1 solid;
                    }
                    .current{
                        color:#e8340e;
                    }
                    a{
                        display: inline-block;
                        padding: 0 10px;
                        color: #999899;
                        font-size: 14px;
                        font-weight: 300;
                        transition: color .3s ease-in-out;
                        &:hover{
                            color: #e8340e;
                        }
                    }
                }
            }
        }
    }
    .nb-access-prolist{
        position: relative;
        width: 1200px;
        margin: auto;
        overflow: hidden;
        margin-bottom: 100px;
        text-align: center;
        ul{
            li{
                float: left;
                width: 292px;
                height: 300px;
                background: #fff;
                margin-left: 10px;
                margin-top: 10px; 
                position: relative; 
                a{
                    @include transition(all 0.15s cubic-bezier(0.65, 0.045, 0.35, 1));
                    display: block;
                    .figure{
                        width: 100%;
                        height: 240px;
                        transition: transform 1s ease;
                        img{
                            height: 100%;
                        }
                    }
                    .title{
                        position: absolute;
                        bottom: 60px;
                        width: 100%;
                        p{
                            font-size: 12px;
                            color: #999;
                            font-weight: 300;
                            transition: color .3s ease-in-out;
                        }
                    }
                    .price{
                        padding-top:16px ;
                        font-size: 12px;
                        color: #666;
                        font-weight: 300;
                    }
                    .product-collect{
                        background-color: #fff;
                        color: #666;
                        width: 70px;
                        top: 0;
                        left: 220px;
                        display: none;
                        height: 25px;
                        line-height: 20px;
                        border-radius: 3px;
                        border:1px solid #ddd;
                        text-align: center;
                        position: absolute; 
                        span{
                           font-weight: 300;
                           font-size: 12px;
                        }
                        .ico-collect{
                            background: url(../img/liebiao/58b8ded63007556.png)no-repeat 0 0;
                            width: 17px;
                            height: 17px;
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                }
                &:hover .product-collect{
                    display: block;
                }
                &:hover .figure{
                    transform: scale(1.05);
                }
                &:hover .title>p{
                    color: #e8340e;
                }
            }
            .clear-marginleft{
                margin-left: 0;
                width: 294px;
            }
        }
    }
    
    
    
    .bg-base-dark{
        background: #efeeeb;
        width: 100%;
        padding:60px 0 80px;
        .bottom-menu{
            width: 1170px;
            margin: auto;
            .text-light{
                font-weight: 300;
                font-size: 12px;
                color: #666;
                opacity: 0.7;
                font-family: "Microsoft Yahei",Arial,Helvetica,sans-serif;
            }
            dl{
                width:195px;
                padding: 0 15px;
                position: relative;
                dt{
                    font-size: 18px;
                    font-weight: normal;
                    margin-bottom: 10px;
                }
                dd{
                    line-height: 22px;
                    a{
                        color: #606463;
                        font-size: 12px;
                        font-weight: 300;
                        font-family: "Microsoft Yahei",Arial,Helvetica,sans-serif;
                        @include transition(all 0.15s cubic-bezier(0.65, 0.045, 0.35, 1));
                        &:hover{
                            color: #e95f46;
                        }
                        i{
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }
                    .weixin{
                        top: 48px;
                        left: -150px;
                        display: none;
                        &::after{
                            bottom: 71.5px;
                            right: -20px;
                        }
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    .weixin{
        position: absolute;
        border: 1px #ccc solid;
        width: 150px;
        height: 150px;
        background: #FFF;
        padding: 5px;
        border-radius: 5px;
        opacity: 0;
        transition: all 10s;
        &::after{
            content: "";
            border: 7px solid transparent;
            border-left: 7px solid #ccc;
            position: absolute;
        }
        img{
            width: 100%;
        }
    }
    footer{
        width: 100%;
        background: #fff;
        padding: 10px 0;
        ul{
            li{
                &:first-child{
                    a{
                        width: 105px;
                        display: inline-block;
                        img{
                            width: 100%;
                        }
                    }
                }
                &:nth-child(2){
                    font-size: 32px;
                    a{
                        display: inline-block;
                        margin-right: 10px;
                        &:first-child{
                            &:hover{
                                color: #e5162c;
                            }
                        }
                        &:last-child{
                            color: #555;
                            &:hover{
                                color: #000;
                            }
                        }
                    }
                    .hwx{
                        position: relative;
                        .weixin{
                            display: none;
                            top: -160px;
                            left: -62px;
                            &::after{
                                border-top: 7px solid #ccc;
                                bottom: -20px;
                                left: 70px;
                                border-left: 7px solid transparent;
                            }
                        }
                    }
                }
                &:nth-child(3){
                    span{
                        font-size: 12px;
                        color: #555;
                        font-weight: 300;
                        a{
                            color: #e95f46;
                            &:hover{
                                color: #951b1b;
                            }
                        }
                    }
                }
                &:nth-child(4){
                    padding-top: 10px;
                    font-size: 12px;
                    color: #555;
                    font-weight: 300;
                    a{
                        padding-right:10px;
                        display: inline-block;
                        vertical-align: middle;
                        color: #e95f46;
                        img{
                            height: 18px;
                            vertical-align: middle;
                        }
                        &:hover{
                             color: #951b1b;
                        }
                    }
                }
                &:last-child{
                    font-size: 12px;
                    a{
                        display: inline-block;
                        margin: 10px;
                        font-weight: 300;
                        color: #e95f46;
                        &:hover{
                             color: #cf2b00;
                        }
                    }
                    .btn-group{
                        display: inline-block;
                        height: 22px;
                        width: 91px;
                        background: #E9E8E6;
                        color: #555;
                        text-align: right;
                        line-height: 20px;
                        border-radius: 30px;
                        padding-right: 7px;
                        font-weight: 300;
                        i{
                            display: inline-block;
                            overflow: hidden;
                            height: 16px;
                            width: 20px;
                            margin-top: 2px;
                            margin-right: 4px;
                            vertical-align: middle;
                            background: url(../img/index/spritesheet.png)no-repeat -2px -691px;
                        }
                        &:hover{
                            background: #B6B6B6;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
